<template>
  <div style="background:white;height:100%;padding:20px">
    <a-row>
      <a-col :span="11">
        <div style="margin-top:15px">
          <div class="textTop">合同信息</div>    
          <mavon-editor @save="saveDoc" @change="updateDoc" ref="editor" v-model="doc"></mavon-editor>
        </div>
      </a-col>
      <a-col :span="2"></a-col>
      <a-col :span="11">
        <div style="margin-top:15px">
          <div class="textTop">关于我们</div>    
          <mavon-editor @save="saveDoc" @change="updateDoc" ref="editor" v-model="doc"></mavon-editor>
        </div>
      </a-col>


    </a-row>
  </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

export default {
  components: { mavonEditor },
  
  data() {
    return {
      doc: '',
      loading: false,
      imageUrl: '',
      loading: false,
      data: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      columns: [
        {
          title: '序号',
          dataIndex: 'no',
        },
        {
          title: '原网址',
          dataIndex: 'description',
        },
        {
          title: '短链接',
          dataIndex: 'callNo',
        },
        {
          title: '生成时间',
          dataIndex: 'status',
        },
        {
          title: '生成ID',
          dataIndex: 'updatedAt',
        },
        {
          title: '备注',
          dataIndex: 'updatedA',
        },
      ],
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    updateDoc(markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      console.log('markdown内容: ' + markdown)
      console.log('html内容:' + markdown)
    },
    saveDoc(markdown, html) {
      // 此时会自动将 markdown 和 html 传递到这个方法中
      console.log('markdown内容:' + markdown)
      console.log('html内容:' + html)
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
  },
}
</script>
<style lang="less">
 .textTop{
    background-color: #009688!important;
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: white;
    border-radius: 2px 2px 0 0;
    font-size: 14px;  
    text-align:center  
 }
</style>